<template>
	<view>
		<view v-for="(item,index) in RoleLabels" :key="index">
			<view style="padding:20rpx;">{{ item.LabelName }}</view>
			<view style="padding:20rpx;">
				<fui-data-tag multiple mark defaultBorderColor="#e0e0e0" :options="item.subRoleLabel"
					:value="UserRoleLabels" @change="changeRoleLabels"></fui-data-tag>
			</view>
		</view>
		<button class="sub-btn" @click="saveRoleLabels">保存身份标签</button>
		<view style="height: 50rpx;"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				RoleLabels: [],
				SelectRoleLabels: [],
				UserRoleLabels: []
			};
		},
		onLoad() {
			this.getRoleLabel();
		},
		methods: {
			getRoleLabel() {
				this.$httpost('/Labels/RoleLabel', {}).then(res => {
					if (res.code == 200) {
						this.RoleLabels = res.data.RoleLabel
						this.UserRoleLabels = res.data.UserRoleLabels
					}
				});
			},
			changeRoleLabels(e) {
				// console.log('UserRoleLabels', e)
				this.SelectRoleLabels = e.detail.item
				this.UserRoleLabels = e.detail.value
			},
			saveRoleLabels() {

				// console.log('this.UserRoleLabels', this.SelectRoleLabels)

				this.$httpost('/UserAction/saveRoleLabels', {
					setRoleLabels: this.SelectRoleLabels,
					UserRoleLabels: this.UserRoleLabels
				}).then(res => {
					if (res.code == 200) {
						if (res.data.UserRoleLabelIDs !== null) {
							// this.UserRoleLabels = JSON.parse(res.data.UserRoleLabelIDs)
							uni.navigateBack()
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.submitBtn {
		background-color: $globalColor;
		color: #000;
		font-size: 28rpx;
		border: 0rpx solid $globalColor;
		width: 80vw;
		height: 60rpx;
		line-height: 60rpx;
		margin: auto
	}
</style>